<template>
  <div v-if="async">
    <template v-if="widget.type == 'TextBoxControl' || widget.type == 'SerialControl' || widget.type == 'SystemIdControl' || widget.type == 'SummaryControl' || widget.type == 'FormulaControl' || widget.type == 'MatrixControl'">
      <el-input v-model="viewModel" placeholder="请输入" :size="size"/>
    </template>
    <template v-if="widget.type == 'TextAreaControl'">
      <el-input v-model="viewModel" type="textarea" placeholder="请输入" :size="size"/>
    </template>
    <template v-if="widget.type == 'PhoneControl'">
      <el-input v-model="viewModel" :maxlength="11" placeholder="请输入" :size="size">
        <template #prefix>
          <el-icon><Iphone /></el-icon>
        </template>
      </el-input>
    </template>
    <template v-if="widget.type == 'LandlineControl'">
      <el-input v-model="viewModel" placeholder="请输入" :size="size">
        <template #prefix>
          <el-icon><Iphone /></el-icon>
        </template>
      </el-input>
    </template>
    <template v-if="widget.type == 'PassWordControl' || widget.type == 'PasswordNumberControl'">
      <el-input v-model="viewModel" type="password" placeholder="请输入" :size="size"/>
    </template>  
    <template v-if="widget.type == 'EmailControl'">
      <el-input v-model="viewModel" :size="size">
        <template #append>.com</template>
      </el-input>
    </template>
    <template v-if="widget.type == 'UrlControl'">
      <el-input v-model="viewModel" :size="size">
        <template #prepend>Http://</template>
      </el-input>
    </template>
    <template v-if="widget.type == 'PercentageControl'">
      <el-input v-model="viewModel" :size="size">
        <template #append>%</template>
      </el-input>
    </template>  
    <template v-if="widget.type == 'AmountControl'">
      <el-input v-model="viewModel" :size="size">
        <template #prepend>￥</template>
      </el-input>
    </template> 
    <template v-if="widget.type == 'MemberRadioButtonControl' || widget.type == 'DepartmentRadioButtonControl' || widget.type == 'MoneyTypeControl'">
      <f-radio v-model="viewModel" :size="size"></f-radio>
    </template> 
    <template v-if="widget.type == 'MemberCheckBoxControl' || widget.type == 'DepartmentCheckBoxControl' || widget.type == 'CheckOpinionControl'">
      <f-checkbox v-model="viewModel" :size="size"></f-checkbox>
    </template> 
    <template v-if="widget.type == 'RoleTypeControl' || widget.type == 'RoleGradeControl'">
      <f-select v-model="viewModel" :size="size"></f-select>
    </template>
    <template v-if="widget.type == 'CreateTimeControl' || widget.type == 'UpdateTimeControl'">
      <f-time v-model="viewModel" :size="size"></f-time>
    </template>  
    <template v-if="widget.type == 'ScoreControl'">
      <el-rate v-model="viewModel" clearable allow-half :size="size"/>
    </template>  
  </div>
</template>

<script>
export default {
  model: {
    prop: 'dataModel',
    event: 'change'
  },
  props: {
    widget: {},
    dataModel: {},
    size: {}
  },
  data() {
    return {
      async: false,
      viewModel: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {  
      if (this.dataModel) {
        this.viewModel = this.dataModel        
      }
      this.async = true
    }
  }
}
</script>